import QtQuick 1.1
import com.meego 1.0
import "CommomUtil.js" as Util

ToolBarLayout{
    id: container
    width: 480; height: 73

    property int currentChecked: 2

    signal showConfirmDialog

    BorderImage {
        id: toolbar_back
        source: "../images/toolbar/selBack.png"
        anchors.fill: parent
    }

    ToolIcon{
        id: back_bt
        width: container.width / 6; height: container.height
        anchors.left: container.left; anchors.bottom: container.bottom
        iconId: "toolbar-back"
        platformStyle: toolBar_style
        onClicked: {
//            Util.openFile("GPSTestPage.qml");
            comfirm();
        }
    }

    Rectangle{
        id: back_bt_rect
        opacity: container.currentChecked === 1 ? 0 : 0.5
        color: "#000000"
        anchors.fill: back_bt;
    }

    ToolButton {
        id: articles_bt
        iconSource: "../images/toolbar/btn_1.png"
        width: container.width / 6; height: container.height
        anchors.left: back_bt.right; anchors.bottom: container.bottom
        platformStyle: toolBar_style
        onClicked: {Util.switchFile("ArticlePage.qml");container.currentChecked = 2;}
    }

    Rectangle{
        id: articles_bt_rect
        opacity: container.currentChecked === 2 ? 0 : 0.5
        color: "#000000"
        anchors.fill: articles_bt;
    }

    ToolButton {
        id: modulelibs_bt
        iconSource: "../images/toolbar/btn_2.png"
        width: container.width / 6; height: container.height
        anchors.left: articles_bt.right; anchors.bottom: container.bottom
        platformStyle: toolBar_style
        onClicked: {Util.switchFile("ModulelibsPage.qml");container.currentChecked = 3;}
    }

    Rectangle{
        id: modulelibs_bt_rect
        opacity: container.currentChecked === 3 ? 0 : 0.5
        color: "#000000"
        anchors.fill: modulelibs_bt;
    }

    ToolButton {
        id: favorite_bt
        iconSource: "../images/toolbar/btn_3.png"
        width: container.width / 6; height: parent.height
        anchors.left: modulelibs_bt.right; anchors.bottom: container.bottom
        onClicked: {Util.openFile("FavoritesPage.qml");}
        platformStyle: toolBar_style
    }

    Rectangle{
        id: favorite_bt_rect
        opacity: container.currentChecked === 4 ? 0 : 0.5
        color: "#000000"
        anchors.fill: favorite_bt;
    }

    ToolButton {
        id: forum_bt
        iconSource: "../images/toolbar/btn_4.png"
        width: container.width / 6; height: container.height
        anchors.left: favorite_bt.right; anchors.bottom: container.bottom
        onClicked: {Util.switchFile("ForumPage.qml");container.currentChecked = 5;}
        platformStyle: toolBar_style
    }

    Rectangle{
        id: forum_bt_rect
        opacity: container.currentChecked === 5 ? 0 : 0.5
        color: "#000000"
        anchors.fill: forum_bt;
    }

    ToolButton {
        id: others_bt
        iconSource: "../images/toolbar/btn_5.png"
        width: container.width / 6; height: container.height
        anchors.left: forum_bt.right; anchors.bottom: container.bottom
        onClicked: {Util.switchFile("MorePage.qml");container.currentChecked = 6;}
        platformStyle: toolBar_style
    }

    Rectangle{
        id: others_bt_rect
        opacity: container.currentChecked === 6 ? 0 : 0.5
        color: "#000000"
        anchors.fill: others_bt;
    }

    ToolButtonStyle{
        id: toolBar_style
        backgroundVisible: false
        pressedBackground: "image://theme/meegotouch-button-navigationbar-button" + __invertedString + "-background-pressed"
    }
}
